<template>
  <view class="CRM">
    <movable-area class="page-scroll">

      <movable-view :x="x" :y="y" direction="all" inertia class="icons" @tap="add()">
        <uni-icons type="plus-filled" size="50" color="#ED7467" style="height:100%"></uni-icons>
      </movable-view>
      <view class="search">
        <view class="search-left">
          <uni-icons type="search" size="16" color="#b7c5dd"></uni-icons>
          <input placeholder="请输入关键词" v-model="keyword" confirm-type="search" @confirm="onRefresh"></input>
        </view>
        <button class="search-bot" @tap="onRefresh">搜索</button>
      </view>
      <view class="sort">
        <!-- <view v-for="item in sortList" :key="item">
          <uni-tag :text="item.label" size="small" :type="item.type" inverted></uni-tag>
        </view> -->
      </view>
      <scroll-view class="scroll-y" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="" refresher-background="#f2f2f2" @refresherrefresh="onRefresh" @scrolltolower="scrolltolower" :lower-threshold="50">
        <view class="user">
          <view v-for="(item,index) in list" :key="index" class="user-item" @tap="toCRMinfo(item)">
            <view style="display: flex;">
              <view class="user-item-head" @tap.stop="edit(item)">
                <image :src="item.customerSex==1?'/static/CRM/boy.png':'/static/CRM/girl.png'" mode="scaleToFill"></image>
              </view>
              <view class="user-item-right">
                <view class="user-item-name">{{item.customerName}}</view>
                <view class="user-item-status">
                  <view v-if="item.isChild==1">
                    <uni-tag text="有孩子" size="small" type="default" inverted></uni-tag>
                  </view>
                  <view v-if="item.isCompanyBoss==1">
                    <uni-tag text="企业主" size="small" type="success" inverted></uni-tag>
                  </view>
                </view>
              </view>
            </view>
            <view class="user-icons">
              <view class="user-item-phone" @tap.stop="takePhone(item.customerPhone)">
                <uni-icons type="phone-filled" size="20" color="#fff"></uni-icons>
              </view>
            </view>
          </view>
          <view v-if="list.length===0" class="noData">暂无数据</view>
        </view>
        <view class="more">
          <uni-load-more v-if="list.length<total" status="loading" :contentText="{contentrefresh: ' 正在努力加载中...'}"></uni-load-more>
        </view>
      </scroll-view>
    </movable-area>
  </view>
</template>

<script>
let formDate = {
  page: 1,
  pageSize: 10,
}
export default {
  data() {
    return {
      x: 500,
      y: 1000,
      keyword: '',
      sortList: [
        {
          label: "有孩子",
          type: 'default'
        },
        {
          label: "企业主",
          type: 'success'
        },
        {
          label: "地址(↑)",
          type: 'warning'
        },
        {
          label: "地址(↓)",
          type: 'warning'
        },
        {
          label: "人数(↑)",
          type: 'error'
        },
        {
          label: "人数(↓)",
          type: 'error'
        },
        {
          label: "业绩(↑)",
          type: 'primary'
        },
        {
          label: "业绩(↓)",
          type: 'primary'
        },
      ],
      triggered: false,
      loading: false,
      list: [],
      total: 0,
    }
  },
  onShow() {
    this.onRefresh()
  },
  methods: {
    add() {
      uni.navigateTo({
        url: '/pages/CRM/add'
      });
    },
    edit(row) {
      uni.setStorage({
        key: 'userinfo_key',
        data: row,
        success: function () {
          uni.navigateTo({
            url: '/pages/CRM/add'
          });
        }
      });
    },
    takePhone(num) {
      uni.makePhoneCall({
        phoneNumber: num //仅为示例
      });
    },
    getDatas() {
      let _this = this
      _this.$post('/sale/wx/customer/get_datas', { ...formDate, customerName: _this.keyword }, false).then(res => {
        if (res.code * 1 === 200) {
          _this.total = res.data.total
          if (formDate.page === 1) {
            _this.list = res.data.row
          } else {
            _this.list = [..._this.list, ...res.data.row]
          }
          if (_this.list.length === _this.total) {
            _this.loading = true
          } else {
            _this.loading = false
          }
          _this.triggered = false;
        } else {
          formDate.page--
        }
      }).catch(() => {
        _this.triggered = false;
        _this.loading = false
      })
    },
    /**客户详情*/
    toCRMinfo(row) {
      uni.navigateTo({
        url: `/pages/CRM/info?id=${row.id}`
      });
    },
    /**自定义下拉刷新被触发*/
    onRefresh() {
      let _this = this
      _this.triggered = true;
      formDate.page = 1
      _this.getDatas()
    },
    scrolltolower() {
      let _this = this
      if (_this.loading) return;
      _this.loading = true
      formDate.page++
      _this.getDatas()
    },
  }
}
</script>

<style lang="scss" scope>
.CRM {
  width: 100vw;
  height: 100vh;
  background: #f2f2f2;
  overflow: hidden;
}
.page-scroll {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .icons {
    width: 50px;
    height: 50px;
    z-index: 9999;
  }
}
.search {
  background: #fff;
  padding: 15px 3vw;
  display: flex;
  align-items: center;
  &-left {
    display: flex;
    align-items: center;
    background: #f2f2f2;
    border-radius: 18px;
    height: 36px;
    flex: 1;
    padding: 0 10px;
    input {
      width: 100%;
      height: 100%;
      padding-left: 10px;
      font-weight: bold;
    }
  }
  &-bot {
    margin-left: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #fff;
    width: 60px;
    border: 0;
    background: #ed7467;
  }
}
.sort {
  padding: 0px 0 10px 0;
  display: flex;
  flex-wrap: wrap;
  view {
    padding: 5px 0 0 10px;
  }
}
.scroll-y {
  flex: 1;
  height: 0;
}
.user {
  width: 100vw;
  padding: 0 3vw;
  &-icons {
    display: flex;
    align-items: center;
  }
  &-item {
    width: 94vw;
    height: 80px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 3px 3px #eceaea;
    padding: 15px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    &-phone {
      background: #5e8af1;
      border-radius: 50%;
      padding: 5px;
    }
    &-head {
      width: 40px;
      height: 40px;
      image {
        width: 100%;
        height: 100%;
      }
      padding: 1px;
      border: 1px solid rgb(253, 247, 247);
      border-radius: 50%;
    }

    &-right {
      padding-left: 10px;
      height: 48px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    &-name {
      font-size: 16px;
      font-weight: bold;
    }
    &-status {
      display: flex;
      view {
        padding-right: 10px;
      }
    }
  }
  &-item + &-item {
    margin-top: 10px;
  }
}
</style>
